<!--FooterCell -->
<template>
  <view class="FooterCell flex flex-m flex-b" :class="name">
    <view class="title">{{ title }}</view>
    <view class="desc">{{ desc }}</view>
  </view>
</template>

<script>
  export default {
    name: 'FooterCell',

    props: {
      title: String,
      desc: String,
      type: {
        type: String,
        default: '',
        validator(v) {
          return ['', 'title'].includes(v)
        }
      }
    },
    watch: {
      type: {
        handler(n, o) {
          this.name = 'type-' + n
        },
        immediate: true
      }
    },
    data() {
      return {
        name: ''
      }
    },
    methods: {
      joinStr(v) {
        return 'type-' + v
      }
    }
  }
</script>
<style lang="scss" scoped>
  .FooterCell {
    font-size: 26rpx;
    padding-left: 30rpx;
    color: #888;
    .title {
      color: #000;
    }
  }

  .type-title {
    font-weight: bold !important;
    font-size: 30rpx !important;
    .title {
      font-weight: bold;
    }
    .desc {
      color: $yellow;
    }
  }
</style>
